<template>
    <div style="width: 100%; height: 100%">
        <MainHeader class="slogan-header"></MainHeader>
        <div class="main-container-content contentBoxs  not">
            <el-row :gutter="10">
                <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                    <Commontitle title="教材学习" dec=""></Commontitle>
                </el-col>
            </el-row>
            <div class="mistakesCollectionContainer">
                <div class="mistakesCollectionContainer_containers">
                    <el-form class="formBox formBox1" :model="queryParams" ref="queryForm" size="small" :inline="true"
                        label-width="68px">
                        <el-form-item label="笔记主题" prop="noteType">
                            <el-input v-model="queryParams.noteType" placeholder="请输入笔记主题" clearable style="width:240px"
                                @keyup.enter.native="handleQuery" @change="handleQuery" />
                        </el-form-item>
                        <el-form-item label="笔记内容" prop="noteName">
                            <el-input v-model="queryParams.noteName" placeholder="请输入笔记内容" clearable style="width:240px"
                                @keyup.enter.native="handleQuery" @change="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini"
                                @click="handleQuery">搜索</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-document" size="mini">浏览</el-button>
                        </el-form-item>
                    </el-form>

                    <div class="table_containers">
                        <!-- <div class="table_containers_top">
                        <el-button :disabled="multiple" plain size="mini" type="danger" @click="handleDelete">取消收藏
                        </el-button>
                    </div> -->
                        <div class="table_containers_table" ref="tableElement">
                            <el-table v-loading="loading" :data="dataList" ref="table" :height="tableHeight"
                                :header-cell-style="{
                'background-color': '#E6E9EF',
                color: '#777C7C',
                'font-weight': '400',
                'font-size': '12px',
                'border-right': '1px solid #ffffff'
            }" highlight-current-row size="mini" :border="true" style="width: 100%" stripe class="elTable"
                                @selection-change="handleSelectionChange">
                                <el-table-column align="center" type="selection" width="50" fixed="left" />
                                <el-table-column align="center" label="序号" type="index" width="60" fixed="left">
                                    <template slot-scope="scope">
                                        <span>{{ getIndex(scope.$index) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="操作" width="120" fixed="left">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="mini">删除</el-button>
                                        <el-button type="text" size="mini">修改</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="笔记主题" width="120" prop="statusName">

                                </el-table-column>
                                <el-table-column align="center" label="笔记内容" prop="className" width="90">

                                </el-table-column>
                                <el-table-column align="center" label="截图" prop="reelNum" width="90">

                                </el-table-column>
                                <el-table-column align="center" label="切片名" prop="questionNum" width="90">

                                </el-table-column>
                                <el-table-column align="center" label="笔记人" prop="questionTypeName" width="90">

                                </el-table-column>

                                <el-table-column align="center" label="笔记时间" prop="respondentTime">

                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="paginationDiv" :class="device === 'mobile' ? 'active' : ''">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page.sync="scienceManagerTable.page" :page-sizes="[10, 20, 30, 40, 50, 100]"
                                :page-size="10" layout="sizes, prev, pager, next,total"
                                :total="scienceManagerTable.total">
                            </el-pagination>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'mistakesCollection',
    components: {

    },
    data() {
        return {
            tableHeight: null,
            dataList: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非多个禁用
            multiple: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                questionType: undefined,
                classId: undefined,
                status: undefined,

            },
            scienceManagerTable: {
                page: 1,
                size: 10,
                total: 0,
            },
            classIdArr: [
                { label: '章节练习', value: '0' },
                { label: '全真模拟', value: '1' },
                { label: '考试题库', value: '2' },
            ],
            questionTypeArr: [
                { label: '单选', value: '0' },
                { label: '多选', value: '1' }
            ],
            statusArr: [
                { label: '初次做错', value: '0' },
                { label: '重做做错', value: '1' },
                { label: '重做准确', value: '2' }
            ],

        };
    },
    updated() {
        this.$nextTick(() => {
            const element = this.$refs.tableElement;
            if (element) {
                const rect = element.getBoundingClientRect();
                if (rect && rect.top) {
                    const top = rect.top + 70 + 'px'
                    // console.log("tabl 高度---------------")
                    // console.log(top)
                    this.tableHeight = `calc(100vh - ${top})`
                } else {
                    this.tableHeight = `400px`
                }
            } else {
                this.tableHeight = `400px`
            }
            this.$refs.table.doLayout()
        })
    },
    mounted() {
        const { state } = this.$store;
        this.dataList = [
            {
                id: 1,
                className: '章节类别',
                reelNum: '第一章****',
                questionTypeName: '单选',
                questionNum: 1,
                score: 2,
                questionName: '题目111',
                questionAnswer: 'C',
                respondent: '答题者',
                respondentTime: '2024-08-06',
                statusName: '初次做错'
            },
            {
                id: 2,
                className: '章节类别',
                reelNum: '第一章****',
                questionTypeName: '单选',
                questionNum: 1,
                score: 2,
                questionName: '题目111',
                questionAnswer: 'C',
                respondent: '答题者',
                respondentTime: '2024-08-06',
                statusName: '初次做错'
            }, {
                id: 3,
                className: '章节类别',
                reelNum: '第一章****',
                questionTypeName: '单选',
                questionNum: 1,
                score: 2,
                questionName: '题目111',
                questionAnswer: 'C',
                respondent: '答题者',
                respondentTime: '2024-08-06',
                statusName: '初次做错'
            }
        ]
        this.loading = false
    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    methods: {
        handleDelete() {

        },
        // 真实序号计算（计算分页影响）
        getIndex(index) {
            return (
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
            );
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            console.log(selection)
            this.ids = selection.map((item) => item.id);
            this.multiple = !selection.length;
        },
        handleSizeChange(val) {

            this.queryParams.size = val;
            this.scienceManagerTable.size = val
            console.log(`每页 ${val} 条`);
           
        },
        handleCurrentChange(val) {
            this.scienceManagerTable.page = val;
            this.queryParams.size = val - 1
            console.log(`当前页: ${val}`);
           
        },
        handleQuery() {
            console.log("请求列表接口！")
           
        },

    },
};
</script>

<style scoped lang="scss">
.mistakesCollectionContainer {
    background: #fff;
    height: calc(100% - 50px);
    width: 100%;
    position: relative;

    &_containers {
        padding: 10px;

    }

    .table_containers {
        &_top {
            margin-bottom: 4px;
        }
    }

}
</style>
